<script setup>
import PostsCardContainer from '@/components/PostsCardContainer.vue'
import { useUserStore } from '@/stores/user.js'
import { onMounted, ref } from 'vue'
import http_posts from '@/api/posts.js'
import router from '@/router/index.js'
import { useNavbarStore } from '../../stores/navbar'

const userStore = useUserStore()
const navbarStore = useNavbarStore()

const page = ref(1)
const size = ref(9)
const total = ref(0)
const cardList = ref([]) // 卡片数组
// 获得职位卡片信息
const getCardInfo = async () => {
  const result = await http_posts.getCardInfo(page.value, size.value)
  if (result.code === 200) {
    total.value = result.data.total
    cardList.value = result.data.records
    for (let i = 0; i < cardList.value.length; i++) {
      cardList.value[i].postsKey = JSON.parse(cardList.value[i].postsKey)
    }
  }
}
onMounted(() => {
  window.scrollTo(0, 0)
  userStore.getUserInfo()
  getCardInfo()
  navbarStore.setFlag(true)
})

const handleSizeChange = (val) => {
  size.value = val
  getCardInfo()
}
const handleCurrentChange = (val) => {
  page.value = val
  getCardInfo()
}
</script>

<template>
  <div class="home-box">
    <div
      style="
        width: 82%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
      "
    >
      <PostsCardContainer
        class="postsCard"
        v-for="item in cardList"
        :key="item.postsId"
        :data="item"
        style="margin-bottom: 15px"
        @click="
          router.push({
            path: '/postsInfo',
            query: { postsId: item.postsId }
          })
        "
      />
    </div>
    <el-pagination
      style="padding-left: 500px"
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[9, 12, 15, 18]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.home-box {
  padding: 20px;
  background-color: #e2f2f5;
}
</style>
